<template>
	<view class="waitMyApply">
		<view class="waitMyApplyBox">
			<u-sticky offset-top="0">
				<view class="detailTitle">
					<view :class="[isClick === '待处理' ? 'active' :'','daichuli']" @click="swichTitle('待处理')">
						<text>待处理</text>
					</view>
					<view :class="[isClick === '已处理' ? 'active' :'','yichuli']" @click="swichTitle('已处理')">
						<text>已处理</text>
					</view>
					<view :class="[isClick === '抄送我' ? 'active' :'','chaosongwo']" @click="swichTitle('抄送我')">
						<text>抄送我</text>
					</view>
				</view>
			</u-sticky>
			<view class="publicList" v-if="applyList.length > 0">
				<view v-if="isClick === '待处理'">
					<u-swipe-action>
						<view class="ListBox" v-for="item in applyList" :key="item.id">
							<u-swipe-action-item :options="item.options" :autoClose="true" @click="swipeClick(item)"
								:show="true">
								<view @click="detail(item)">
									<u-row style="padding-top: 30rpx;">
										<u-col span="9">
											<view class="name">{{item.flow_type_val}}</view>
										</u-col>
										<u-col span="3">
											<view class="status">
												<u-tag v-if="item.flow_status === 99" text="作废" type="error"
													shape="circle" size="mini" style="text-align: center;"></u-tag>
												<u-tag v-else :text="statusList[item.flow_status]"
													:type="typeList[item.flow_status]" size="mini" shape="circle"
													style="text-align: center;"></u-tag>
											</view>
										</u-col>
									</u-row>
									<u-row>
										<u-col span="6">
											<view class="type">类型：{{item.flow_id_val}}</view>
										</u-col>
										<u-col span="6">
											<view class="person">发起人：{{item.worker_id_val}}</view>
										</u-col>
									</u-row>
									<u-row style="padding-bottom: 25rpx;">
										<u-col span="12">
											<view class="time">{{item.submit_time}}</view>
										</u-col>
									</u-row>
								</view>
							</u-swipe-action-item>
						</view>
					</u-swipe-action>
				</view>
				<view v-else>
					<view class="ListBox" v-for="item in applyList" :key="item.id">
						<view @click="detail(item)">
							<u-row style="padding-top: 30rpx;">
								<u-col span="9">
									<view class="name">{{item.flow_type_val}}</view>
								</u-col>
								<u-col span="3">
									<view class="status">
										<u-tag v-if="item.flow_status === 99" text="作废" type="error" shape="circle"
											size="mini" style="text-align: center;"></u-tag>
										<u-tag v-else :text="statusList[item.flow_status]"
											:type="typeList[item.flow_status]" size="mini" shape="circle"
											style="text-align: center;"></u-tag>
									</view>
								</u-col>
							</u-row>
							<u-row>
								<u-col span="6">
									<view class="type">类型：{{item.flow_id_val}}</view>
								</u-col>
								<u-col span="6">
									<view class="person">发起人：{{item.worker_id_val}}</view>
								</u-col>
							</u-row>
							<u-row style="padding-bottom: 25rpx;">
								<u-col span="12">
									<view class="time">{{item.submit_time}}</view>
								</u-col>
							</u-row>
						</view>
					</view>
				</view>
				<view style="margin-top: 20rpx;">
					<page-pagination :total="total" :pageSize="fqForm.page_size" :currentPage="fqForm.page"
						@change="changePage" mode="simple" :showAround="true"></page-pagination>
				</view>
			</view>
			<view style="text-align: center;padding-bottom: 50px;" v-else>
				<image src="../../static/img/nullData.png" style="width: 160px;height: 160px;"></image>
				<view class="">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getApply,
		startApply,
		backApply
	} from "../../api/flow.js"
	export default {
		data() {
			return {
				isClick: '待处理',
				fqForm: {
					page: 1,
					page_size: 7,
					flow_status: '1,2',
					approve_worker_id: uni.getStorageSync("userId"),
				},
				form: {},
				applyList: [],
				statusList: ['未提交', '已提交', '审核中', '审核通过', '审核未通过'],
				typeList: ['', 'warning', 'warning', 'success', 'info'],
				sendFormData: {
					flow_status: '3,4',
					read_only_worker_id: uni.getStorageSync("userId"),
					page: 1,
					page_size: 7,
				},
				formDataFinish: {
					flow_status: '3,4',
					view_worker_id: uni.getStorageSync("userId"),
					page: 1,
					page_seize: 7,
				},
				backForm: {},
				total: 0,
			}
		},
		mounted() {
			this.form = this.fqForm
			this.getApplyList()
		},
		methods: {
			swipeClick(item) {
				if (item.options[0].text === '审批') {
					if (item.flow_status === 2) {
						uni.navigateTo({
							url: `/pages/manage/approve?flow_log_id=${item.id}&flow_id=${item.flow_id}&flow_node_id=${item.flow_node_id}`
						});
					} else {
						startApply({
							flow_log_id: item.id
						}).then(res => {
							if (res.data.code === 1) {
								uni.navigateTo({
									url: `/pages/manage/approve?flow_log_id=${item.id}&flow_id=${item.flow_id}&flow_node_id=${item.flow_node_id}`
								});
							}
						})
					}
				} else if (item.options[0].text === '退回') {
					uni.showModal({
						title: '温馨提示',
						content: `确定要${item.options[0].text}吗？`,
						success: res => {
							if (res.confirm) {
								this.backForm = item
								this.confirm()
							}
						}
					})
				}
			},
			swichTitle(title) {
				this.isClick = title
				if (this.isClick === '已处理') {
					this.form = this.formDataFinish
					this.getApplyList()
				} else if (this.isClick === '抄送我') {
					this.form = this.sendFormData
					this.getApplyList()
				} else {
					this.form = this.fqForm
					this.getApplyList()
				}
			},
			changePage(currentPage) {
				this.fqForm.page = currentPage;
				this.getApplyList();
			},
			getApplyList() {
				getApply(this.form).then(res => {
					if (res.data.code === 1) {
						let options = []
						res.data.data.list.forEach(ele => {
							ele.flow_status = Number(ele.flow_status)
							if (ele.flow_status === 1 || ele.flow_status === 2) {
								options = [{
									text: '审批',
									style: {
										backgroundColor: '#3c9cff'
									}
								}]
							} else if (ele.sort != 1) {
								options = [{
									text: '退回',
									style: {
										backgroundColor: '#f56c6c'
									}
								}]
							}
							ele.options = options
						})
						this.applyList = res.data.data.list
						this.total = Number(res.data.data.total)
					}
				})
			},
			confirm() {
				backApply({
					flow_log_id: this.backForm.id
				}).then((res) => {
					if (res.data.code === 1) {
						this.getApplyList()
						this.$refs.uToast.show({
							type: 'success',
							icon: false,
							title: '提示',
							message: res.data.msg,
						});
					}
				})
			},
			detail(row) {
				let obj = {
					id:row.id,
					flow_id:row.flow_id,
					flow_node_id:row.flow_node_id,
					model_id:row.model_id,
					code:row.code,
					model_data_id:row.model_data_id
				}
				obj = JSON.stringify(obj)
				uni.navigateTo({
					url: `/pages/manage/applyDetail?data=${obj}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.waitMyApply {
		.detailTitle {
			width: 100%;
			font-size: 14px;
			margin-top: 15px;
			background-color: #fff;

			.daichuli,
			.yichuli,
			.chaosongwo {
				width: 32.8%;
				display: inline-block;
				text-align: center;
				padding: 10px 0;
				color: rgb(52, 120, 247);
				border-width: 1px;
				border-style: solid;
				border-color: rgb(0, 121, 254);
			}

			.yichuli {
				border-right: none;
				border-left: none;
			}

			.daichuli {
				border-radius: 5px 0px 0px 5px;
			}

			.chaosongwo {
				border-radius: 0px 5px 5px 0px;
			}

			.active {
				background-color: rgb(52, 120, 247);
				color: #fff;
			}
		}

		.ListBox {
			width: 95%;
			margin: 0 auto;
			margin-top: 20rpx;
			border: 1px solid #ebeef5;
			border-radius: 5px;
			background-color: #fff;
			-moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

			.u-row {
				padding: 10rpx 20rpx;
				padding-right: 40rpx;

				.name {
					color: #999999;
					font-weight: 700;
					font-size: 30rpx;

				}

				.type,
				.person {
					font-size: 12px;
					color: #999999;

				}

				.time {
					color: #58A3F7;
					font-size: 25rpx;
				}
			}
		}
	}
</style>
